<template>
  <div class="page-content">
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <router-link to="/tools" class="mr-2">
          <i class="fas fa-arrow-left text-gray-600"></i>
        </router-link>
        <h1 class="text-lg font-semibold">诉讼费计算</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4 space-y-4">
      <!-- 诉讼费计算器 -->
      <div class="bg-white rounded-xl shadow-md p-6">
        <div class="flex items-center mb-4">
          <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
            <i class="fas fa-calculator text-yellow-600"></i>
          </div>
          <div>
            <h2 class="text-lg font-semibold">诉讼费计算器</h2>
            <p class="text-sm text-gray-500">根据《诉讼费用交纳办法》精准计算</p>
          </div>
        </div>

        <div class="space-y-4 mb-6">
          <!-- 案件类型 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              案件类型 <span class="text-red-500">*</span>
            </label>
            <select 
              v-model="caseType"
              @change="onCaseTypeChange"
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <option value="">请选择案件类型</option>
              <option value="property">财产案件</option>
              <option value="non-property">非财产案件</option>
              <option value="labor">劳动争议案件</option>
              <option value="intellectual">知识产权纠纷</option>
              <option value="marriage">婚姻家庭案件</option>
              <option value="other">其他案件</option>
            </select>
          </div>

          <!-- 诉讼标的金额 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              诉讼标的金额（元）
            </label>
            <input 
              v-model.number="propertyAmount"
              type="number" 
              placeholder="请输入诉讼标的金额" 
              class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
          </div>

          <!-- 适用程序 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              适用程序
            </label>
            <div class="grid grid-cols-2 gap-3">
              <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50" :class="{ 'border-blue-500 bg-blue-50': procedure === 'ordinary' }">
                <input v-model="procedure" type="radio" class="mr-2" value="ordinary">
                <span class="text-sm">普通程序</span>
              </label>
              <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50" :class="{ 'border-blue-500 bg-blue-50': procedure === 'simple' }">
                <input v-model="procedure" type="radio" class="mr-2" value="simple">
                <span class="text-sm">简易程序</span>
              </label>
            </div>
          </div>

          <!-- 审级 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              审级
            </label>
            <div class="grid grid-cols-2 gap-3">
              <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50" :class="{ 'border-blue-500 bg-blue-50': trialLevel === 'first' }">
                <input v-model="trialLevel" type="radio" class="mr-2" value="first">
                <span class="text-sm">一审</span>
              </label>
              <label class="flex items-center p-3 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50" :class="{ 'border-blue-500 bg-blue-50': trialLevel === 'second' }">
                <input v-model="trialLevel" type="radio" class="mr-2" value="second">
                <span class="text-sm">二审</span>
              </label>
            </div>
          </div>
        </div>

        <button 
          @click="calculateCost"
          class="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-gray-400 text-white py-3 px-4 rounded-lg font-medium transition-colors"
          :disabled="!canCalculate"
        >
          <i class="fas fa-calculator mr-2"></i>
          计算诉讼费
        </button>
      </div>

      <!-- 计算结果 -->
      <div v-if="calculationResult" class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fas fa-receipt text-green-600 mr-2"></i>
          诉讼费计算结果
        </h3>

        <div class="space-y-4">
          <!-- 费用明细 -->
          <div class="bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg p-4">
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <span class="text-sm font-medium text-gray-700">案件受理费：</span>
                <span class="text-blue-600 font-bold text-lg">
                  <template v-if="typeof calculationResult.acceptanceFee === 'number'">¥{{ calculationResult.acceptanceFee }}</template>
                  <template v-else>{{ calculationResult.acceptanceFee }}</template>
                </span>
              </div>
              <div v-if="calculationResult.otherFees > 0" class="flex justify-between items-center">
                <span class="text-sm font-medium text-gray-700">其他费用：</span>
                <span class="text-blue-600 font-medium">¥{{ calculationResult.otherFees }}</span>
              </div>
              <div class="border-t pt-2">
                <div class="flex justify-between items-center">
                  <span class="font-medium text-gray-800">总计：</span>
                  <span class="text-blue-600 font-bold text-xl">
                    <template v-if="typeof calculationResult.totalFee === 'number'">¥{{ calculationResult.totalFee }}</template>
                    <template v-else>{{ calculationResult.totalFee }}</template>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 计算说明 -->
          <div class="bg-gray-50 rounded-lg p-4">
            <h4 class="font-medium text-gray-800 mb-2">计算依据</h4>
            <p class="text-sm text-gray-600">{{ calculationResult.calculation }}</p>
          </div>

          <!-- 程序说明 -->
          <div v-if="procedure === 'simple'" class="bg-green-50 border-l-4 border-green-400 p-4">
            <h4 class="font-medium text-green-800 mb-2">
              <i class="fas fa-info-circle mr-1"></i>
              简易程序优惠
            </h4>
            <p class="text-sm text-green-700">适用简易程序的案件，受理费减半收取。</p>
          </div>

          <!-- 二审说明 -->
          <div v-if="trialLevel === 'second'" class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
            <h4 class="font-medium text-yellow-800 mb-2">
              <i class="fas fa-exclamation-triangle mr-1"></i>
              二审费用说明
            </h4>
            <p class="text-sm text-yellow-700">二审案件的受理费按照一审受理费标准收取。</p>
          </div>
        </div>
      </div>

      <!-- 收费标准说明 -->
      <div class="bg-white rounded-xl shadow-md p-6">
        <h3 class="text-lg font-semibold mb-4 flex items-center">
          <i class="fas fa-book text-purple-600 mr-2"></i>
          收费标准说明
        </h3>

        <div class="space-y-4">
          <!-- 财产案件受理费 -->
          <div>
            <h4 class="font-medium text-gray-800 mb-2">财产案件受理费</h4>
            <div class="overflow-x-auto">
              <table class="w-full text-sm border-collapse">
                <thead>
                  <tr class="bg-gray-50">
                    <th class="border border-gray-200 px-3 py-2 text-left">诉讼标的金额</th>
                    <th class="border border-gray-200 px-3 py-2 text-left">收费标准</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">不超过1万元</td>
                    <td class="border border-gray-200 px-3 py-2">每件50元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">1万元至10万元</td>
                    <td class="border border-gray-200 px-3 py-2">2.5%</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">10万元至20万元</td>
                    <td class="border border-gray-200 px-3 py-2">2% + 300元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">20万元至50万元</td>
                    <td class="border border-gray-200 px-3 py-2">1.5% + 1300元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">50万元至100万元</td>
                    <td class="border border-gray-200 px-3 py-2">1% + 3800元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">100万元至200万元</td>
                    <td class="border border-gray-200 px-3 py-2">0.9% + 4800元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">200万元至500万元</td>
                    <td class="border border-gray-200 px-3 py-2">0.8% + 6800元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">500万元至1000万元</td>
                    <td class="border border-gray-200 px-3 py-2">0.7% + 11800元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">1000万元至2000万元</td>
                    <td class="border border-gray-200 px-3 py-2">0.6% + 21800元</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">超过2000万元</td>
                    <td class="border border-gray-200 px-3 py-2">0.5% + 41800元</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- 非财产案件受理费 -->
          <div>
            <h4 class="font-medium text-gray-800 mb-2">非财产案件受理费</h4>
            <div class="overflow-x-auto">
              <table class="w-full text-sm border-collapse">
                <thead>
                  <tr class="bg-gray-50">
                    <th class="border border-gray-200 px-3 py-2 text-left">案件类型</th>
                    <th class="border border-gray-200 px-3 py-2 text-left">收费范围</th>
                    <th class="border border-gray-200 px-3 py-2 text-left">说明</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">离婚案件</td>
                    <td class="border border-gray-200 px-3 py-2">50-300元</td>
                    <td class="border border-gray-200 px-3 py-2">如涉及财产分割，财产总额不超过20万元的不另收费；超过部分按0.5%收费</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">人格权案件</td>
                    <td class="border border-gray-200 px-3 py-2">100-500元</td>
                    <td class="border border-gray-200 px-3 py-2">赔偿额不超过5万元的免收；5-10万元部分收1%；超过10万元部分收0.5%</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">劳动争议案件</td>
                    <td class="border border-gray-200 px-3 py-2">10元</td>
                    <td class="border border-gray-200 px-3 py-2">固定收费</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">知识产权案件</td>
                    <td class="border border-gray-200 px-3 py-2">500-1000元</td>
                    <td class="border border-gray-200 px-3 py-2">无争议金额者；有争议金额者按财产案件标准收取</td>
                  </tr>
                  <tr>
                    <td class="border border-gray-200 px-3 py-2">其他非财产案件</td>
                    <td class="border border-gray-200 px-3 py-2">50-100元</td>
                    <td class="border border-gray-200 px-3 py-2">根据案件性质和复杂程度确定</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p class="text-xs text-gray-500 mt-2">
              * 收费范围内的具体金额根据案件的复杂程度、争议大小、社会影响等因素综合确定
            </p>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'LitigationCostCalculator',
  data() {
    return {
      caseType: '',
      propertyAmount: '',
      compensationAmount: '',
      procedure: 'ordinary',
      trialLevel: 'first',
      calculationResult: null
    }
  },
  computed: {
    canCalculate() {
      if (!this.caseType) return false
      
      return true
    }
  },
  methods: {
    onCaseTypeChange() {
      this.calculationResult = null
      this.propertyAmount = ''
      this.compensationAmount = ''
    },
    
    calculateCost() {
      if (!this.canCalculate) return
      
      let acceptanceFee = 0
      let calculation = ''
      
      switch (this.caseType) {
        case 'property':
          if (!this.propertyAmount || this.propertyAmount <= 0) {
            acceptanceFee = 50 // 最低收费标准
            calculation = '财产案件未填写诉讼标的金额，按最低收费标准50元计算。请填写准确金额以获得精确计算结果。'
          } else {
            const result = this.calculatePropertyFee(this.propertyAmount)
            acceptanceFee = result.fee
            calculation = result.calculation
          }
          break
          
        case 'non-property':
          acceptanceFee = '50-300元'
          calculation = '非财产案件收费标准：50-300元'
          break
          
        case 'labor':
          acceptanceFee = 10
          calculation = '劳动争议案件固定收费10元'
          break
          
        case 'intellectual':
          acceptanceFee = '500-1000元'
          calculation = '知识产权案件收费标准：500-1000元'
          break
          
        case 'marriage':
          acceptanceFee = '50-300元'
          calculation = '婚姻家庭案件收费标准：50-300元'
          break
          
        case 'other':
          acceptanceFee = '50-100元'
          calculation = '其他案件收费标准：50-100元'
          break
      }
      
      // 简易程序减半
      if (this.procedure === 'simple') {
        if (typeof acceptanceFee === 'number') {
          acceptanceFee = Math.round(acceptanceFee / 2)
        } else {
          // 对于范围值，显示减半后的范围
          acceptanceFee = acceptanceFee.replace(/(\d+)-(\d+)元/, (match, min, max) => {
            return `${Math.round(min / 2)}-${Math.round(max / 2)}元`
          })
        }
        calculation += '，适用简易程序减半收取'
      }
      
      this.calculationResult = {
        acceptanceFee: acceptanceFee,
        otherFees: 0,
        totalFee: typeof acceptanceFee === 'number' ? acceptanceFee : acceptanceFee,
        calculation: calculation
      }
    },
    
    calculatePropertyFee(amount) {
      let fee = 0
      let calculation = ''
      
      if (amount <= 10000) {
        fee = 50
        calculation = '不超过1万元，每件收费50元'
      } else if (amount <= 100000) {
        fee = Math.round(amount * 0.025)
        calculation = `1万元至10万元部分，按2.5%收费：${amount} × 2.5% = ${fee}元`
      } else if (amount <= 200000) {
        fee = Math.round(amount * 0.02) + 300
        calculation = `10万元至20万元部分，按2%收费加300元：${amount} × 2% + 300 = ${fee}元`
      } else if (amount <= 500000) {
        fee = Math.round(amount * 0.015) + 1300
        calculation = `20万元至50万元部分，按1.5%收费加1300元：${amount} × 1.5% + 1300 = ${fee}元`
      } else if (amount <= 1000000) {
        fee = Math.round(amount * 0.01) + 3800
        calculation = `50万元至100万元部分，按1%收费加3800元：${amount} × 1% + 3800 = ${fee}元`
      } else if (amount <= 2000000) {
        fee = Math.round(amount * 0.009) + 4800
        calculation = `100万元至200万元部分，按0.9%收费加4800元：${amount} × 0.9% + 4800 = ${fee}元`
      } else if (amount <= 5000000) {
        fee = Math.round(amount * 0.008) + 6800
        calculation = `200万元至500万元部分，按0.8%收费加6800元：${amount} × 0.8% + 6800 = ${fee}元`
      } else if (amount <= 10000000) {
        fee = Math.round(amount * 0.007) + 11800
        calculation = `500万元至1000万元部分，按0.7%收费加11800元：${amount} × 0.7% + 11800 = ${fee}元`
      } else if (amount <= 20000000) {
        fee = Math.round(amount * 0.006) + 21800
        calculation = `1000万元至2000万元部分，按0.6%收费加21800元：${amount} × 0.6% + 21800 = ${fee}元`
      } else {
        fee = Math.round(amount * 0.005) + 41800
        calculation = `超过2000万元部分，按0.5%收费加41800元：${amount} × 0.5% + 41800 = ${fee}元`
      }
      
      return { fee, calculation }
    }
  }
}
</script>

<style scoped>
/* 自定义样式可以在这里添加 */
</style>

